<script setup>
import {ref} from 'vue';
import {editUser} from '@/apis/user.js';


const props = defineProps({
  // 非空对象
  userMsg: {
    type: Object,
    require: true
  }
})

// 从父组件获取关闭的方法
const emit = defineEmits(['closeDrawer'])
const closeReport = () => {
  emit('closeDrawer')
}

const formData = ref({})
formData.value = props.userMsg;
const rules = ref({
  username: [],
  nickname: [],
  password: [],
  email: [],
  phone: [],
  balance: [],
  remarks: [],
});

const submitEdit = () => {
  const params01 = {
    ...formData.value,
  };
  editUser(params01)
      .then((res) => {
        if (res.data.code === 1) {
          console.log(res)
          ElMessage.success('修改成功');
          formData.value = {}
          closeReport()

        } else {
          // Handle error
          ElMessage.error(res.data.msg || '操作失败');
        }
      })
      .catch((error) => {
        ElMessage.error(error);
      });
};

</script>

<template>
  <div id="editUser">
    <el-form :model="formData" :rules="rules" label-position="left" label-width="88px">
          <el-form-item label="用户名：" prop="username">
            <el-input v-model="formData.username" placeholder="请输入用户名"
                      readonly></el-input>
          </el-form-item>
          <el-form-item label="昵称：" prop="nickname">
            <el-input v-model="formData.nickname" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <el-form-item label="邮箱：" prop="email">
            <el-input v-model="formData.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="电话号码：" prop="phone">
            <el-input v-model="formData.phone" placeholder="请输入电话号码"></el-input>
          </el-form-item>
          <el-form-item label="余额：" prop="balance">
            <el-input v-model="formData.balance" placeholder="请输入余额" readonly></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input v-model="formData.remarks" :autosize="{minRows: 4, maxRows: 4}"
                      placeholder="请输入备注" type="textarea"></el-input>
          </el-form-item>
          <el-form-item size="large">
            <el-button type="primary" @click="submitEdit">提交</el-button>
            <!--            <el-button @click="resetForm">重置</el-button>-->
          </el-form-item>
      </el-form>
  </div>
</template>

<style scoped>
#editUser {
  width: 100%;
  height: 100%;
  padding: 20px 40px;
}
</style>